<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .name {
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <p>{{msgReverse}}</p>
        <p>{{msgReverse1()}}</p>
        <hr>
        <span class="name">{{cartInfo[0].name}}</span>
        <span class="price ">{{cartInfo[0].price}}</span>
        <span class="num ">{{cartInfo[0].num}}</span>
        <br>
        <span class="name">{{cartInfo[1].name}}</span>
        <span class="price ">{{cartInfo[1].price}}</span>
        <span class="num ">{{cartInfo[1].num}}</span>
        <br>
        <hr>
        <!--计算属性执行一次，依赖缓存，可以减少运算-->
        <p>计算属性 ——总计：{{totalPrice}}</p>
        <p>计算属性 ——总计：{{totalPrice}}</p>
        <p>计算属性 ——总计：{{totalPrice}}</p>
        <p>函数 ——总计：{{totalPrice1()}}</p>
        <p>函数 ——总计：{{totalPrice1()}}</p>
        <p>函数 ——总计：{{totalPrice1()}}</p>
        <hr>
        <input type="text" v-model="lastName">
        <p>fullName全名:<input type="text" v-model="fullName">{{fullName}}</p>
        <p>firstName名字:{{firstName}}</p>
        <p>lastName姓氏:{{lastName}}</p>
        <hr>
        <input type="text" v-model="searchArg">
        <p>{{age}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script >
        let vm=new Vue({
            el:'#app',
            data: {
               message : '郑州职业技术学院',
               //商品数组
               cartInfo:[
                   {
                       name:'米9 战斗天使',
                       price:3999,
                       num:10
                   },
                   {
                       name:'iphone SE2',
                       price:2999,
                       num:10
                   }
               ],
               //fullName:' ',
               firstName:'Bob',
               lastName:'Bill',
               age:0,
               //searchArg:'name=bob&age=18',
            },
            //计算属性 ——属性
            computed: {
                msgReverse:function(){
                    return this.message.split('').reverse().join('')
                },
                //totalPrice vue里早有定义，不用再次定义
                totalPrice:function(){
                    let price = 0;
                    this.cartInfo.forEach(element => {
                        price += element.price*element.num
                    });
                    return price 
                },
                fullName:{
                    //getter
                    get:function(){
                        return this.firstName+'   '+this.lastName
                    },
                    //setter
                    set:function(nowValue){
                        //debugger断点
                        //split(' ')分割成数组，用空格 分割
                        let names=newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[names.lengh-1];
                    }
                },
                searchArg:{
                    get:function(){

                    },
                    set:function(newVal){
                        //searchArg='name=bob&age=18';
                        this.age=newVal.split('&')[1].split('=')[1];
                    }
                },
                
            },
            //函数 ——方法
            methods: {
                msgReverse1:function(){
                    return this.message.split('').reverse().join('')
                },
                totalPrice1:function(){
                    let price = 0;
                    this.cartInfo.forEach(element => {
                        price += element.price*element.num
                    });
                    return price 
                }
            },
           //侦听器，通常写在前面
            watch: {
                
            },
        })
    </script>
</body>
</html>